<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns:required="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        .layui-iconpicker-body.layui-iconpicker-body-page .hide {
            display: none;
        }
    </style>
</head>

<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm data-add-btn"><i class="layui-icon layui-icon-add-1"></i></button>
            <button class="layui-btn layui-btn-sm data-refresh-btn"><i class="layui-icon layui-icon-refresh"></i>
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"><i
                    class="layui-icon layui-icon-delete"></i></button>
        </div>
        <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>

<div hidden="hidden" id="menuform" style="margin: 10px 10px 10px 10px">
    <form class="layui-form " action="" lay-filter="menufrom">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入菜单名" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址</label>
            <div class="layui-input-inline">
                <input type="text" name="url" placeholder="请输入菜单链接" autocomplete="off" class="layui-input"/>
            </div>
            <div class="layui-form-mid layui-word-aux">格式:"/html/..."(省略最后的.html)</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-inline">
                <select name="parentId" lay-verify="required" id="parentId">
                    <option value="0">最上层</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">默认图标</label>
            <div class="layui-input-inline">
                <input type="text" name="icon" id="iconPicker" lay-filter="iconPicker" class="hide"/>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="1" title="有效" checked="checked"/>
                <input type="radio" name="state" value="0" title="无效"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序号</label>
            <div class="layui-input-inline">
                <input type="text" name="order" lay-verify="required|number" autocomplete="off" class="layui-input"/>
                <input type="hidden" name="id" id="id"/>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="formDemoClose">退出</button>
            </div>
        </div>
    </form>

</div>

<script src="/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['iconPickerFa', 'form', 'table', 'layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            iconPickerFa = layui.iconPickerFa;

        $(function () {
            $.ajax({
                url: "/sys/findSysMenuCombox",
                method: "post",
                success: function (data) {
                    if (data.code == '0') {
                        var str = $("#parentId").html();
                        $.each(data.data, function (key, val) {
                            str += '<option value="' + key + '">' + val + '</option>';
                        })
                        $("#parentId").html(str);
                        form.render('select');
                    } else {
                        console.info(data.msg);
                        layer.alert(data.msg);
                    }
                }
            });
        });

        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "/lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            //每个图标格子的宽度
            cellWidth: '16%',
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });

        table.render({
            elem: '#currentTableId',
            url: '/sys/findAllSysMenu',
            method: 'post',
            cols: [ [
                {type: "checkbox", fixed: "left"},
                {field: 'id', title: 'ID', sort: true},
                {field: 'name', title: '菜单名'},
                {field: 'parentId', title: '父级ID', sort: true},
                {field: 'url', title: '地址'},
                {field: 'icon', title: '图标', minWidth: 50},
                {field: 'order', title: '排序', sort: true},
                {field: 'state', title: '状态', sort: true},
                {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            limit: 10,
            page: true,
            size: 'sm',
            skin: 'line',
            height: '720',
            even: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        // 监听刷新操作
        $(".data-refresh-btn").on("click", function () {
            table.reload('currentTableId', {
                url: '/sys/findAllSysMenu'
                , where: {} //设定异步数据接口的额外参数
                //,height: 300
            });

            form.render(null, 'menufrom');

        });


        //监听提交
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                url: "/sys/saveSysMenu",
                method: "post",
                data: data.field,
                success: function (data) {
                    if (data.code == '0') {
                        layer.closeAll('page');
                        table.reload('currentTableId');
                        form.render('select');
                        layer.msg('保存成功...', {time: 3000, icon: 6});
                    } else {
                        console.info(data.msg);
                        layer.alert(data.msg, {
                            title: "系统异常",
                            icon: 2
                        });
                    }
                },
                error: function (xhr, msg) {
                    layer.alert(xhr.code + " " + msg);
                }
            });
            return false;
        });

        //监听关闭
        $("#formDemoClose").on("click", function () {
            layer.closeAll('page');
            form.render(null, 'menufrom');
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {
            form.render(null, 'menufrom');
            //layer.msg('添加数据');
            $("#id").val("-1");
            layer.open({
                type: 1,
                title: "添加菜单",
                content: $("#menuform"),
                skin: 'layui-layer-molv',
                area: "40%"
            });
        });

        // 监听删除操作
        $(".data-delete-btn").on("click", function () {
            var checkStatus = table.checkStatus('currentTableId');
            var data = checkStatus.data;
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                form.val('menufrom', data);
                layer.open({
                    type: 1,
                    title: "编辑菜单",
                    content: $("#menuform"),
                    skin: 'layui-layer-lan',
                    area: "40%"
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除 ' + data.name + ' 么？', {
                    title: "提示",
                    icon: 3,
                    skin: 'layer-ext-moon'
                }, function (index) {
                    $.ajax({
                        url: "/sys/deleteSysMenu",
                        method: "post",
                        data: data.id,
                        success: function (data) {
                            if (data.code == '0') {
                                layer.closeAll('page');
                                table.reload('currentTableId');
                                form.render('select');
                                layer.msg('删除成功...', {time: 3000, icon: 6});
                            } else {
                                console.info(data.msg);
                                layer.alert(data.msg);
                            }
                        },
                        error: function (xhr, msg) {
                            layer.alert(xhr.code + " " + msg);
                        }
                    });
                });
            }
        });
    });
</script>

</body>
</html>
